// 深色主题样式

.theme-dark {
  // 主色调
  --primary-color: #409EFF;
  --primary-light: #79bbff;
  --primary-dark: #337ecc;
  
  // 功能色
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  // 文本色
  --text-primary: #E5EAF3;
  --text-regular: #CFD3DC;
  --text-secondary: #A3A6AD;
  --text-placeholder: #8D9095;
  --text-disabled: #6C6E72;
  
  // 背景色
  --bg-color: #141414;
  --bg-color-page: #0a0a0a;
  --bg-color-overlay: rgba(20, 20, 20, 0.8);
  --bg-color-mask: rgba(0, 0, 0, 0.8);
  
  // 边框色
  --border-color: #4C4D4F;
  --border-color-light: #414243;
  --border-color-lighter: #363637;
  --border-color-extra-light: #2B2B2C;
  --border-color-dark: #58585B;
  --border-color-darker: #636466;
  
  // 填充色
  --fill-color: #2D2D2F;
  --fill-color-light: #262629;
  --fill-color-lighter: #1D1D20;
  --fill-color-extra-light: #191919;
  --fill-color-dark: #39393D;
  --fill-color-darker: #424243;
  --fill-color-blank: #141414;
  
  // 阴影
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.08);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.08);
  
  // 特殊背景
  --header-bg: rgba(20, 20, 20, 0.95);
  --sidebar-bg: #1a1a1a;
  --footer-bg: #0f0f0f;
  
  // 代码高亮
  --code-bg: #2d2d2d;
  --code-color: #ff6b9d;
  --pre-bg: #1e1e1e;
  --pre-color: #d4d4d4;
  
  // 链接色
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-light);
  --link-active-color: var(--primary-dark);
  
  // 表格色
  --table-header-bg: #1a1a1a;
  --table-row-hover-bg: #262629;
  --table-border-color: var(--border-color-lighter);
  
  // 表单色
  --input-bg: #1a1a1a;
  --input-border-color: var(--border-color);
  --input-focus-border-color: var(--primary-color);
  --input-placeholder-color: var(--text-placeholder);
  
  // 按钮色
  --button-default-bg: #2d2d2f;
  --button-default-border: var(--border-color);
  --button-default-color: var(--text-regular);
  --button-hover-bg: #39393d;
  
  // 标签色
  --tag-bg: var(--fill-color-dark);
  --tag-color: var(--text-regular);
  --tag-border-color: var(--border-color);
  
  // 徽章色
  --badge-bg: var(--danger-color);
  --badge-color: #ffffff;
  
  // 进度条色
  --progress-bg: var(--fill-color);
  --progress-color: var(--primary-color);
  
  // 滚动条色
  --scrollbar-track-color: var(--fill-color);
  --scrollbar-thumb-color: var(--border-color-dark);
  --scrollbar-thumb-hover-color: var(--border-color-darker);
  
  // 分割线色
  --divider-color: var(--border-color);
  
  // 选择色
  --selection-bg: var(--primary-color);
  --selection-color: #ffffff;
  
  // 焦点色
  --focus-outline-color: var(--primary-color);
  
  // 禁用色
  --disabled-bg: var(--fill-color);
  --disabled-color: var(--text-disabled);
  --disabled-border-color: var(--border-color);
}

// 深色主题特定样式
.theme-dark {
  color: var(--text-primary);
  background-color: var(--bg-color);
  
  // 滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 4px;
    
    &:hover {
      background: var(--scrollbar-thumb-hover-color);
    }
  }
  
  // 选择文本
  ::selection {
    background: var(--selection-bg);
    color: var(--selection-color);
  }
  
  ::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-color);
  }
  
  // 焦点样式
  :focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
  }
  
  // 链接样式
  a {
    color: var(--link-color);
    
    &:hover {
      color: var(--link-hover-color);
    }
    
    &:active {
      color: var(--link-active-color);
    }
  }
  
  // 代码样式
  code {
    background: var(--code-bg);
    color: var(--code-color);
  }
  
  pre {
    background: var(--pre-bg);
    color: var(--pre-color);
  }
  
  // 分割线样式
  hr {
    background: var(--divider-color);
  }
  
  // 图片反色处理（可选）
  img {
    filter: brightness(0.9);
  }
  
  // 表格样式
  .el-table {
    --el-table-bg-color: var(--bg-color);
    --el-table-header-bg-color: var(--table-header-bg);
    --el-table-row-hover-bg-color: var(--table-row-hover-bg);
    --el-table-border-color: var(--table-border-color);
    --el-table-text-color: var(--text-regular);
  }
  
  // 输入框样式
  .el-input {
    --el-input-bg-color: var(--input-bg);
    --el-input-border-color: var(--input-border-color);
    --el-input-focus-border-color: var(--input-focus-border-color);
    --el-input-placeholder-color: var(--input-placeholder-color);
    --el-input-text-color: var(--text-regular);
  }
  
  // 按钮样式
  .el-button {
    --el-button-bg-color: var(--button-default-bg);
    --el-button-border-color: var(--button-default-border);
    --el-button-text-color: var(--button-default-color);
    --el-button-hover-bg-color: var(--button-hover-bg);
  }
  
  // 卡片样式
  .el-card {
    --el-card-bg-color: var(--fill-color-extra-light);
    --el-card-border-color: var(--border-color);
  }
  
  // 对话框样式
  .el-dialog {
    --el-dialog-bg-color: var(--fill-color-extra-light);
    --el-dialog-box-shadow: var(--shadow-dark);
  }
  
  // 抽屉样式
  .el-drawer {
    --el-drawer-bg-color: var(--fill-color-extra-light);
  }
  
  // 菜单样式
  .el-menu {
    --el-menu-bg-color: var(--bg-color);
    --el-menu-text-color: var(--text-regular);
    --el-menu-hover-bg-color: var(--fill-color);
    --el-menu-active-color: var(--primary-color);
  }
  
  // 标签页样式
  .el-tabs {
    --el-tabs-header-bg-color: var(--bg-color);
  }
  
  // 分页样式
  .el-pagination {
    --el-pagination-bg-color: var(--bg-color);
    --el-pagination-button-bg-color: var(--fill-color);
    --el-pagination-hover-color: var(--primary-color);
  }
  
  // 加载样式
  .el-loading-mask {
    --el-loading-spinner-color: var(--primary-color);
    background: rgba(20, 20, 20, 0.8);
  }
  
  // 消息样式
  .el-message {
    --el-message-bg-color: var(--fill-color-dark);
    --el-message-border-color: var(--border-color);
  }
  
  // 通知样式
  .el-notification {
    --el-notification-bg-color: var(--fill-color-dark);
    --el-notification-border-color: var(--border-color);
  }
  
  // 工具提示样式
  .el-tooltip__popper {
    --el-tooltip-bg-color: var(--fill-color-darker);
    --el-tooltip-text-color: var(--text-primary);
  }
  
  // 气泡确认框样式
  .el-popconfirm {
    --el-popconfirm-bg-color: var(--fill-color-dark);
    --el-popconfirm-border-color: var(--border-color);
  }
  
  // 日期选择器样式
  .el-date-picker {
    --el-datepicker-bg-color: var(--fill-color-dark);
    --el-datepicker-border-color: var(--border-color);
  }
  
  // 时间选择器样式
  .el-time-picker {
    --el-time-picker-bg-color: var(--fill-color-dark);
    --el-time-picker-border-color: var(--border-color);
  }
  
  // 选择器样式
  .el-select {
    --el-select-input-bg-color: var(--input-bg);
    --el-select-input-border-color: var(--input-border-color);
  }
  
  // 级联选择器样式
  .el-cascader {
    --el-cascader-bg-color: var(--fill-color-dark);
    --el-cascader-border-color: var(--border-color);
  }
  
  // 穿梭框样式
  .el-transfer {
    --el-transfer-bg-color: var(--fill-color-dark);
    --el-transfer-border-color: var(--border-color);
  }
  
  // 上传样式
  .el-upload {
    --el-upload-bg-color: var(--fill-color);
    --el-upload-border-color: var(--border-color);
  }
  
  // 进度条样式
  .el-progress {
    --el-progress-bg-color: var(--progress-bg);
    --el-progress-color: var(--progress-color);
  }
  
  // 树形控件样式
  .el-tree {
    --el-tree-bg-color: var(--bg-color);
    --el-tree-text-color: var(--text-regular);
    --el-tree-hover-bg-color: var(--fill-color);
  }
  
  // 骨架屏样式
  .el-skeleton {
    --el-skeleton-color: var(--fill-color);
    --el-skeleton-to-color: var(--fill-color-light);
  }
  
  // 空状态样式
  .el-empty {
    --el-empty-fill-color-0: var(--fill-color);
    --el-empty-fill-color-1: var(--fill-color-light);
    --el-empty-fill-color-2: var(--fill-color-dark);
  }
  
  // 结果样式
  .el-result {
    --el-result-title-color: var(--text-primary);
    --el-result-subtitle-color: var(--text-secondary);
  }
  
  // 特殊元素调整
  .el-popper {
    background: var(--fill-color-dark) !important;
    border: 1px solid var(--border-color) !important;
    
    .el-popper__arrow::before {
      background: var(--fill-color-dark) !important;
      border: 1px solid var(--border-color) !important;
    }
  }
  
  // 下拉菜单
  .el-dropdown-menu {
    background: var(--fill-color-dark) !important;
    border: 1px solid var(--border-color) !important;
    
    .el-dropdown-menu__item {
      color: var(--text-regular) !important;
      
      &:hover {
        background: var(--fill-color) !important;
        color: var(--primary-color) !important;
      }
    }
  }
  
  // 选择器下拉
  .el-select-dropdown {
    background: var(--fill-color-dark) !important;
    border: 1px solid var(--border-color) !important;
    
    .el-select-dropdown__item {
      color: var(--text-regular) !important;
      
      &:hover {
        background: var(--fill-color) !important;
      }
      
      &.selected {
        color: var(--primary-color) !important;
        background: var(--fill-color) !important;
      }
    }
  }
}
